<template>
  <nut-popup position="bottom" v-model:visible="show">
    <nut-date-picker v-model="currentDate" :min-date="minDate" :max-date="maxDate" :is-show-chinese="true" :three-dimensional="false" @confirm="confirm" @cancel="show = false"></nut-date-picker>
  </nut-popup>
</template>

<script setup>
import { defineProps, defineEmits, ref, defineExpose } from 'vue';
const props = defineProps({
  value: {
    type: [String, Number],
  },
  text: {
    type: [String, Number],
  },
  columns: {
    type: Array,
  },
  placeholder: {
    type: String,
  }
})
const emit = defineEmits(['openPopUp', 'confirm', 'update:value', 'update:text'])

const minDate = new Date();
const maxDate = new Date(2035, 10, 1);
let currentDate = new Date(2022, 4, 10, 10, 10);
if (props.value) {
  let time = props.value.split('-')
  // currentDate = props.value
  currentDate = new Date(time[0], time[1], time[2]);
}
watch(() => props.value, (newV) => {
  let time = newV.split('-')
  currentDate = new Date(time[0], time[1], time[2]);
})
const confirm = ({ selectedValue, selectedOptions }) => {
  let time = selectedValue[0] + '-' + selectedValue[1] + '-' + selectedValue[2]
  emit('update:value', time)
  show.value = false
  if (time) {
    emit('confirm', time)
  }
};
const show = ref(false)
const open = () => {
  show.value = true
}
// const confirm = (item) => {
//   emit('update:value', item.selectedOptions[0].value)
//   emit('update:text', item.selectedOptions[0].text)
//   emit('confirm', item.selectedOptions[0].value)
// }
defineExpose({ open })
</script>

<style lang="scss" scoped>
</style>